<template>
  <div class="app-container">
    <el-page-header title="" @back="goBack" class="custom-page-header">
      <template #icon>
        <img src="/images/return.png" alt="返回" class="custom-icon" />
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> {{ name }},您好！ </span>
      </template>
    </el-page-header>
    <el-main class="content">
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "UserComponent",
  data() {
    return {
      name: "兰爵", // 这里定义用户的名字
    };
  },

  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
  },
  mounted() {
    this.name = JSON.parse(localStorage.getItem("user")).name;
  },
};
</script>

<style scoped>
/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100vw; /* 设置宽度为视口宽度的100% */
  height: 100vh; /* 设置高度为视口高度的100% */
}

.custom-icon {
  width: 24px; /* 设置图标宽度 */
  height: 24px; /* 设置图标高度 */
}

.custom-page-header {
  background-color: rgb(194, 228, 241); /* 设置背景颜色 */
  margin-left: -5px;
  position: absolute;
  width: 125%;
  padding: 10px;
}

.text-large {
  font-size: 15px;
  color: #333;
}

.font-600 {
  font-weight: 600;
  color: #333;
}

.mr-3 {
  margin-left: 11rem;
}
</style>
